<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">	<title>Apache CXF Search with Apache Lucene and Apache Tika</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
	<link rel="stylesheet" href="css/fileinput.min.css">
	<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
	<script src="js/fileinput.min.js" type="text/javascript"></script>
</head>

<body>
	<div class="container">
		<div class="fluent-container" id="error">
			<div class="alert alert-danger hide" role="alert" id="error-message"></div>	    	
	    </div>
	
	    <form id="form" class="form-upload" role="form" enctype="multipart/form-data" method="post" action="http://localhost:9000/catalog">
            <h2 class="form-upload-heading">Please upload PDF or ODT file</h2>
            <div class="form-group">
                <input id="file" name="file" type="file" multiple="true" class="file"></input>
            </div>
        </form>
        
        <form id="form-search" role="search" method="get" action="http://localhost:9000/catalog/search">
            <h2 class="form-upload-heading">Query the Catalog</h2>
		    <div class="input-group add-on">
		        <input id="search-query" type="text" class="form-control" placeholder="Search">		    
			    <div class="input-group-btn">
			    	<button type="submit" class="btn btn-default"><i class="glyphicon glyphicon-search"></i></button>
			    </div>
		    </div>

			<div class="btn-group" data-toggle="buttons">
				<label class="btn btn-primary active"> 
					<input type="radio" name="options" id="any" />Any keyword (OR)
				</label> 
				<label class="btn btn-primary"> 
					<input type="radio" name="options" id="all" />All keywords (AND)
				</label> 
			</div>
		</form>
		
		<div class="fluent-container" id="results">
		</div>
    </div> <!-- /container -->
    
    <script type="text/javascript">
        $( "#any" ).prop( "checked", true );
    
        function handleError(request, status, error, form) {
			$( "#error-message" ).removeClass('hide');
			
			if ( request.status === undefined || request.status === 0 ) {
				$( "#error-message" ).html( "Unable to send request to the server: " + $(form).attr("action") );
			} else {
				if( request.status == 500 ) {
					$( "#error-message" ).html( 'Internal server error.' );
				} else if( request.status == 409 ) {
					$( "#error-message" ).html( 'Document with such name already exists.' );
				} else if( request.status == 400 ) {
					$( "#error-message" ).html( 'No documents for upload, please select at least one.' );
				}
			}
        };
    
    	$( "#form" ).submit(function(e) {    		
    		var formData = new FormData( $(this)[0] );
    		$( "#error-message" ).addClass('hide');    		

    		$.ajax({
    			url:$(this).attr("action"),
    			type: 'POST',
    			data: formData,
    			async: false,
    			success: function (data) {
    			    $('#file').fileinput('clear');
    			},
    			error: function (request, status, error) {
    				handleError(request, status, error, "#form");
    			},
	    		cache: false,
    			contentType: false,
    			processData: false
    		});
    			        
	        e.preventDefault();
	        return false;
	    });
    	
    	$( "#form-search" ).submit(function(e) {    		
    		var query = $( "#search-query" ).val().trim();
    		$( "#error-message" ).addClass('hide');
    		$( "#results" ).html("");
    		
    		if( query !== "" ) {
    			var contentQuery = "";
    			var wildcardsQuery = "";
    			
    			if( $( "#all" ).is( ":checked" ) ) {
    				contentQuery += "(";

    				query.split( " " ).forEach( function( entry ) {
    					if( contentQuery.length > 1 ) contentQuery += ";";
    					contentQuery += "ct==" + encodeURIComponent( entry );
        			} );

    				contentQuery += ")";
    			} else {
    				contentQuery = "ct==" + encodeURIComponent( query );
    			    			
    				query.split( " " ).forEach( function( entry ) {    				
    					wildcardsQuery += ",source==" + encodeURIComponent( "*" + entry + "*" );
    			    } );
    			}
    			
    			var encodedWildcardsQuery = encodeURIComponent( wildcardsQuery.trim() );
    			var filter = contentQuery + encodedWildcardsQuery;

	    		$.ajax({
	    			url: $(this).attr("action") + "?$filter=" + filter,
	    			type: 'GET',
	    			async: false,
	    			success: function (data) {
	    				var table = "\
	    				<table class=\"table table-striped\">\
	    			    <thead>\
	    			        <tr>\
	    			            <th>File</th>\
	    			            <th>Score</th>\
	    			            <th>Action</th>\
	    			        </tr>\
	    			    </thead>\
	    			    <tbody>";	    			    
	    				
	    				$.each(data, function (index, value) {
	    					table += "\
	    					<tr>\
	    		                <td>" + value.source + "</td>\
	    		                <td>" + value.score + "</td>\
	    		                <td><a href='" + value.url + "'>Download</a></td>\
	    		            </tr>";
	    				});

	    				table += "\
	    	    	    </tbody>\
	    	    		</table>";
	    	    		
	    				$( "#results" ).html(table);
	    		
	    			},
	    			error: function (request, status, error) {
	    				handleError(request, status, error, "#form-search");
	    			},
		    		cache: false,
	    			contentType: false,
	    			processData: false
	    		});
    	    }
    			        
	        e.preventDefault();
	        return false;
	    });
    </script>
</body>

</html>
